<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3><input type="text" v-model="firstName" /></h3>
			<h3><input type="text" v-model="lastName" /></h3>
			<h6>fName:{{fName}}</h6>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					firstName: '张',
					lastName: '三',
					fName: '',
					a: {
						b: {
							c: true
						}
					}
				},
				methods: {

				},
				//方式一
				/* watch: {
					firstName: function(newVal, oldVal) {
						// console.log(newVal, oldVal);
						this.fName = newVal + this.lastName;
					},
					lastName: function(newVal, oldVal) {
						// console.log(newVal, oldVal);
						this.fName = this.firstName + newVal;
					}
				} */
			});
			//方式二
			// vm.$watch('firstName', function(newVal, oldVal) {
			// 	this.fName = newVal + this.lastName;
			// });
			//方式三
			vm.$watch('firstName', {
				immediate: true, //将立即以表达式的当前值触发回调
				handler(newVal, oldVal) {
					this.fName = newVal + this.lastName;
				}
			});

			vm.$watch('a', {
				immediate: true, //将立即以表达式的当前值触发回调
				deep: true, //深度监视
				handler(newVal, oldVal) {
					console.log("1111")
				}
			});
		</script>
	</body>
</html>
